<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import { homeDrug } from "@/api/home";
const animationDuration = 6000;

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
  },
  data() {
    return {
      DurgListData: [],
      durgName: [],
      durgNum: [],
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      homeDrug()
        .then((res) => {
          this.DurgListData = res.data;
          this.DurgListData.forEach((value, index) => {
            this.durgName[index] = value.medicinesName;
            this.durgNum[index] = value.totalAmount;
            this.chart = echarts.init(this.$el, "macarons");
            this.chart.setOption({
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                },
              },
              grid: {
                top: 10,
                left: "2%",
                right: "2%",
                bottom: "3%",
                containLabel: true,
              },
              xAxis: [
                {
                  type: "category",
                  data: this.durgName,
                  axisTick: {
                    alignWithLabel: true,
                  },
                },
              ],
              yAxis: [
                {
                  type: "value",
                  axisTick: {
                    show: false,
                  },
                },
              ],
              series: [
                {
                  name: "pageA",
                  type: "bar",
                  stack: "vistors",
                  barWidth: "60%",
                  data: this.durgNum,
                  animationDuration,
                },
              ],
            });
          });
        })  
        .catch((res) => {
          console.log(res);
        });
    },
  },
};
</script>
